<!DOCTYPE html>
<html>
    <head>
        <style type = "text/css">
                    #div1{
                        width:150px;
                        height:150px;
                        background-color: blue;
                    }
                    #div2{
                        width: 100px;
                        height: 100px;
                        background-color: red;
                    }
                    #div3{
                        width:50px;
                        height:50px;
                        background-color: yellow;
                    }
                </style>
    </head>
    <body>
        
      <div id="div1">
          <div id="div2">
              <div id="div3"></div>
          </div>
      </div>
        <script type="text/javascript">
            document.getElementById("div1").onclick=function(){
                console.log("触发div1单击事件")
            }
            document.getElementById("div2").onclick=function(){
                console.log("触发div2单击事件")
            }
            document.getElementById("div3").onclick=function(){
                console.log("触发div3单击事件")
            }
</script>
    </body>
</html>